<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="/">商户管理</a></el-breadcrumb-item>
			<el-breadcrumb-item>会员列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片 -->
		<el-card class="box-card">
			<!-- 顶部模糊搜索框 -->
			<el-form :inline="true" :model="likeline" ref="formName" class="demo-form-inline">
				<el-form-item label="商户名称">
					<el-input v-model="likeline.name" placeholder="商户名称"></el-input>
				</el-form-item>
				<el-form-item label="门店地址">
					<el-input v-model="likeline.area" placeholder="门店地址"></el-input>

				</el-form-item>
				<div>
					<el-form-item>

						<el-button type="primary" @click="likeSubmit">筛选</el-button>
						<el-button type="primary" style="margin-left: 35px;">导出</el-button>
						<el-button @click="resetForm()" type="primary" style="margin-left: 80px;">清空筛选条件</el-button>


					</el-form-item>
				</div>
			</el-form>
			<!-- table表格 -->
			<el-table :data="merchantList" border style="width: 100%">
				<el-table-column prop="name" label="商户名称">
				</el-table-column>
				<el-table-column prop="area" label="门店地址">
				</el-table-column>
				<el-table-column prop="director" label="负责人">
				</el-table-column>
				<el-table-column prop="createDate" label="注册时间">
				</el-table-column>
				<el-table-column label="审核状态">
					<template slot-scope="scope">
						<div v-if="scope.row.state==0">已拒绝</div>
						<div v-else-if="scope.row.state==1">已通过</div>
						<div v-if="scope.row.state==2">未审核</div>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" :enterable='false' placement="top">
							<el-button type="primary" size="mini" @click="selectdate(scope.row.id)">详情</el-button>
						</el-tooltip>


						<el-tooltip class="item" effect="dark" :enterable='false' placement="top">
							<el-button type="primary" size="mini" @click="updateState(scope.row.id)">审核</el-button>
						</el-tooltip>

					</template>
				</el-table-column>
			</el-table>
			<!-- 分页查询 -->
			<!-- 分页 -->
			<!-- 
				current-page：当前页
				page-sizes：可以选择的每页条数
				layout：要展示的分页的组件
				total：总条数
				@size-change：每页展示的条数发生改变，调用的函数
				@current-change：当前页发生改变时调用的函数
			-->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryInfo.pageNum" :page-sizes="[3,4,5]" :page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>

			<!-- 审核对话框 -->
			<el-dialog title="审核" :visible.sync="sdialogVisible" width="30%">

				<el-input v-model="likeline.id"></el-input>
				<el-select v-model="likeline.state" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>

				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="oonsubmit">确 定</el-button>
			</el-dialog>




		</el-card>
	</div>
</template>

<script>
	import Vue from 'vue';
	export default {

		data() {
			return {



				// 模糊查询及分页查询所有的会员信息
				formName: '',
				merchantList: [],
				total: 0,
				queryInfo: {
					pageNum: 1,
					pageSize: 3
				},
				likeline: {
					id: '',
					name: '',
					area: '',
					director: '',
					createDate: '',
					state: ''
				},
				//组件传值
				id: '',
				//审核状态
				sdialogVisible: false,
				//审核状态选择器
				options: [{
					value: '0',
					label: '已拒绝'
				}, {
					value: '1',
					label: '已通过'
				}, {
					value: '2',
					label: '已审核'
				}],

			}
		},
		//页面加载的钩子函数
		mounted: function() {
			this.selectmem();
		},
		methods: {

			// 顶部模糊搜索框
			async likeSubmit() {
				let param = new URLSearchParams();
				param.append("name", this.likeline.name);
				param.append("area", this.likeline.area)
				let res = await this.$http.post("/selectLike", param)
				if (res.data.code == 400) {
					this.$message.error(res.data.msg)
					return;
				} else {
					this.merchantList = res.data.data.list;
					this.total = res.data.data.total
					this.likeline.name = '';
					this.likeline, area = '';
					return;
				}
			},
			//清空筛选条件
			resetForm() {
				this.$refs[formName].resetFields();
			},
			//分页查询所有的会员信息
			async selectmem() {
				let res = await this.$http.get('selectMem?pageNum=' + this.queryInfo.pageNum + '&pageSize=' + this
					.queryInfo.pageSize);
				if (res.data.code == 400) {
					this.$message.error(res.data.msg);
					return
				} else {
					this.merchantList = res.data.data.list;
				}
			},

			// 每页显示条数发生改变触发
			handleSizeChange(size) {
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				this.selectmem();
			},
			// 当前页发生改变时触发的函数
			handleCurrentChange(pn) {
				this.queryInfo.pageNum = pn
				this.selectmem();
			},
			// 点击详情跳转页面
			async selectdate(id) {
				//详情页面跳转
				//this.$router.push('/merchantXQ')
				this.id = id;
				this.$router.push({
					path: '/merchantXQ',
					query: {
						id: this.id
					}
				});

			},
			updateState(id) {
				this.likeline.id = id;
				this.sdialogVisible = true;

			},
			async oonsubmit() {
				let param = new URLSearchParams();
				param.append('id', this.likeline.id);
				param.append('state', this.likeline.state);
				let res = await this.$http.post('updateState', param)
				if (res.data.code == 400) {
					this.$message.error(res.msg);
					this.likeline.id = '';
					this.sdialogVisible = false;
					this.selectmem();
					return;
				}else if (res.data.code == 200) {
					this.$message.success(res.msg);
					this.likeline.id = '';
					this.likeline.state = '';
					this.sdialogVisible = false;
					this.selectmem();
					return;
				}
				
			},




		}
	}
</script>

<style scoped>
	/* 卡片样式 */

	.box-card {
		margin-top: 15px;
		text-align: left;
		padding: 20px;
	}

	/* 顶部模糊搜索框 */
</style>